<template>
	<el-tooltip class="item" effect="dark" content="打开弹幕" placement="left-start"  v-if="barrageshowif">
	<transition name="fade-scale">	
     <div id="barrageshow" :style="barrageshowstyle" v-if="barrageshowif" v-show="barrageshows" @click="barrageshow()">
		<slot name="barrageshowImg"><img src="@/assets/img/icon/barrageshow.svg" /></slot>
		<div id="barrageshowText" ><slot name="barrageshowText"></slot></div>
	</div>
	</transition>
    </el-tooltip>
</template>

<script>
	import Bus from "@/assets/js/bus.js"
	
	export default{
		name:'barrageshow',
		props:{
			width:{
				type:Number,
				default:40,
			},
			height:{
				type:Number,
				default:40,
			},
			backcolor:{
				type:String,
				default:'#f7f9fa'
			},
			color:{
				type:String,
				default:'#000000'
			}
		},
		data() {
			return{
				barrageshows:false
			}
		},
		mounted(){
			Bus.$on('barrageshowOpen',()=>{
			  this.barrageshows=true
		    })
		},
		methods:{
			barrageshow(){
		        Bus.$emit('barrageshowClose')
                this.barrageshows=false
			},
		},
		computed:{
			barrageshowstyle(){
				return{height:this.height+'px',width:this.width+'px',backgroundColor:this.backcolor,color:this.color}
			},
            barrageshowif(){
                if(this.$route.path.indexOf('messageboard')!=-1){
					return true
				}
                else{
                    return false
                }
            }
		},
		watch:{
            
		}
	}
</script>

<style scoped>
	#barrageshow{
		border-radius: 5PX;
		box-shadow: 1px 1px 3px gray;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		margin-bottom: 10px;
		border: 1px solid #e5e9ef;
	}
	#barrageshow img{
		width: 50px;
		height: 30px;
	}
	#barrageshowText{
		font-weight: bolder;
		font-size: 14px;
	}
	#barrageshow:hover{
		opacity: 0.5;
	}
</style>